import * as echarts from 'echarts';
import { onMounted, watch, computed, watchEffect, onUnmounted } from 'vue';
import {chartResize} from '@/views/dataBoard/compNew/ut';

const Comp = (props: any) => {
  const {id, data, key} = props;
  let counter = 0;
  let selectedIndex = -1;
  let timmer: any = null;
  const setChart = () => {
    const _data = data.value[key];
    const myChart = echarts.init(document.getElementById(id) as any);
    if (_data) {
      clearInterval(timmer);
      const option: any = {
        series: [
          {
            name: '上月用水',
            type: 'pie',
            center:['50%', '50%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data.map((item) => {
              return {
                name: item.classifyName,
                value: item.value
              }
            }),
          },
        ],
      };
      myChart.setOption(option);
      timmer = setInterval(function () {
        // 重置所有数据的选中状态
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        });
    
        // 选中当前索引的数据项
        counter++;
        const currentIndex = counter % option.series[0].data.length;
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
    
        // 记录当前选中的索引
        selectedIndex = currentIndex;
      }, 1000);
    
    }
    chartResize(myChart);
  }
  watchEffect(
    () => {
      setChart();
    },
    {
      flush: 'post',
    },
  );
  onUnmounted(() => {
    clearInterval(timmer);
  })
};

export default Comp;
